<template>
	<view class="mainpadding2" v-if="pageShow">
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="titletext bold hei_text">代號</view>
			<input type="text" class="hei_text main_size bold" style="text-align: right;" placeholder="請輸入"
				v-model="code">
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="titletext bold hei_text">名稱</view>
			<input type="text" class="hei_text main_size bold" style="text-align: right;" placeholder="請輸入"
				v-model="name">
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="titletext bold hei_text">寛高單位</view>
			<input type="text" class="hei_text main_size bold" style="text-align: right;" placeholder="請輸入"
				v-model="size">
		</view>
		<view class="titleBox hei_text">運算管道</view>
		<view class="mainpadding_top ffffff radius">
			<view class="flexbetween">
				<view class="titletext bold hei_text white_nowrap">類型</view>
				<view class="flexright" @click="show=true">
					<input type="text" class="hei_text main_size bold textright" disabled="" placeholder="請選擇類型"
						v-model="typeName">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="flexleft margin_top" style="margin-left: 190rpx;">
				<view class="hei_text bold title" style="margin-right: 170rpx;">運算符號</view>
				<view class="hei_text bold title margin_right2">數字</view>
			</view>
			<view class="flexleft margin_top" v-show="type!=2">
				<view class="huang_text bold title margin_right2">
					<text style="margin-right: 80rpx;">寬</text> <text>度</text>
				</view>
				<!-- <view class="flexleft iteminputjs margin_right">
					<input type="text" class="hei_text main_size bold" style="text-align: center;" placeholder="單位">
					<u-icon name="arrow-down" color="#999" size="16"></u-icon>
				</view> -->
				<!-- 單位 -->
				<view class="iteminputjs hei_text main_size bold textcenter" style="margin-right: 120rpx;"  v-text="wei_a" @click="selectjs(1)"></view>
				<!-- <uni-data-select v-if="type!=5" v-model="wei_a" placeholder="符號" :localdata="range" @change="change"></uni-data-select> -->
				<!-- <view class="" style="width: 40%;" v-if="type==5"></view> -->
				<view class="iteminputjs margin_right">
					<input type="text" class="hei_text main_size bold" style="text-align: center;" placeholder="數值"
						v-model="wei_b">
				</view>
				<!-- 單位 -->
			</view>
			<view class="flexleft margin_top" v-show="type==0 || type==5">
				<view class="huang_text bold title" style="margin-right: 45rpx;">
					<text>寬高之間</text>
				</view>
				<view class="iteminputjs hei_text main_size bold textcenter" v-text="wei_c" @click="selectjs(2)"></view>
				<!-- <uni-data-select v-model="wei_c" placeholder="符號" :localdata="range1"
					@change="change"></uni-data-select> -->
			</view>
			<view class="flexleft margin_top" v-show="type!=1">
				<view class="huang_text bold title margin_right2">
					<text style="margin-right: 80rpx;">高</text> <text>度</text>
				</view>
				<!-- 單位 -->
				<view class="iteminputjs hei_text main_size bold textcenter" style="margin-right: 120rpx;"  v-text="hei_a" @click="selectjs(3)"></view>
				<!-- <uni-data-select v-if="type!=5" v-model="hei_a" placeholder="符號" :localdata="range" @change="change"></uni-data-select> -->
				<!-- <view class="" style="width: 40%;" v-if="type==5"></view> -->
				<view class="iteminputjs margin_right">
					<input type="text" class="hei_text main_size bold" style="text-align: center;" placeholder="數值"
						v-model="hei_b">
				</view>
				<!-- 單位 -->
			</view>
			<view class="flexleft margin_top">
				<view class="huang_text bold title margin_right2">
					<text style="margin-right: 26rpx;">計</text>
					<text style="margin-right: 26rpx;">算</text>
					<text>值</text>
				</view>
				<view class="" style="margin-right: 88rpx;" v-show="type!=1">
					<view class="iteminputjs hei_text main_size bold textcenter" v-text="hei_c" @click="selectjs(4)"></view>
					<!-- <uni-data-select v-model="hei_c" placeholder="符號" :localdata="range" @change="change"></uni-data-select> -->
				</view>
				<view class="" style="margin-right: 88rpx;" v-show="type==1">
					<view class="iteminputjs hei_text main_size bold textcenter" v-text="wei_c" @click="selectjs(5)"></view>
					<!-- <uni-data-select v-model="wei_c" placeholder="符號" :localdata="range1"
						@change="change"></uni-data-select> -->
				</view>
				<view class="iteminputjs margin_right" style="width: 210rpx; min-width: 210rpx;max-width: 210rpx;">
					<input type="text" class="hei_text main_size bold" style="text-align: center;" placeholder="數值"
						v-model="numval">
				</view>
			</view>
		</view>
		<!-- <view class="mainpadding_top ffffff radius flexbetween">
			<view class="titletext bold hei_text">数值</view>
			<input type="text" class="hei_text main_size bold" style="text-align: right;" placeholder="請输入"
				v-model="numval">
		</view> -->
		<view class="line"></view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="titletext bold hei_text">小數位數</view>
			<input type="text" class="hei_text main_size bold" style="text-align: right;" placeholder="請輸入"
				v-model="num">
		</view>
		<view class="submitbtn margin_top" @click="submit">確認</view>
		<u-picker cancelText="取消" confirmText="確認"  :show="show" :columns="columns" keyName="name" confirmColor="#FFB800" @cancel="show=false"
			@confirm="confirm"></u-picker>
		<u-picker cancelText="取消" confirmText="確認"  :show="showjs" :columns="columnsjs" keyName="text" confirmColor="#FFB800" @cancel="showjs=false"
			@confirm="confirmjs"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				range: [[{
					value: "+",
					text: "+"
				}, {
					value: "-",
					text: "-"
				}, {
					value: "*",
					text: "*"
				}, {
					value: "/",
					text: "/"
				}, ]],
				range1: [[{
					value: '+',
					text: '+'
				}, {
					value: '-',
					text: '-'
				}, {
					value: '*',
					text: '*'
				}, {
					value: '/',
					text: '/'
				}, {
					value: '>',
					text: '>'
				}, {
					value: '<',
					text: '<'
				}, ]],
				show: false,
				columns: [
					[{
						type: 0,
						name: "輸入寬高"
					}, {
						type: 1,
						name: "輸入寬"
					}, {
						type: 2,
						name: "輸入高"
					}, {
						type: 3,
						name: "寬高取最大"
					}, {
						type: 4,
						name: "寬高取最小"
					},  {
						type: 5,
						name: "極距尺寸"
					}, ]
				],
				name: "", //名称
				code: "", //代号
				wei_a: "", //宽(+-*/)
				wei_b: "", //宽值
				wei_c: "", //宽(+-*/<>)
				hei_a: "", //高(+-*/)
				hei_b: "", //高值
				hei_c: "", //高(+-*/)
				numval: "", //数值
				type: 0, //类型:0=宽高,1=宽,2=高,3=宽高最大,4=宽高最小
				typeName: "輸入寬高", //类型名称
				num: "", //小数
				size: "", //單位
				shop_id: uni.getStorageSync("shop_id"),
				id: "", //编辑公式id
				pageShow: false,
				selectval:"",
				showjs:false,
				columnsjs:[],
				issubmit:false
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				uni.setNavigationBarTitle({
					title: "編輯計算管道"
				})
				this.getInfo()
			} else {
				this.pageShow = true
			}
		},
		methods: {
			selectjs(val){
				this.selectval = val
				if(val==1 || val==3 || val==4){
					this.columnsjs = this.range
				}
				if(val==2 || val==5){
					this.columnsjs = this.range1
				}
				this.showjs = true
			},
			confirmjs(e){
				this.showjs = false
				if(this.selectval==1){
					this.wei_a = e.value[0].text
				}
				if(this.selectval==2){
					this.wei_c = e.value[0].text
				}
				if(this.selectval==3){
					this.hei_a = e.value[0].text
				}
				if(this.selectval==4){
					this.hei_c = e.value[0].text
				}
				if(this.selectval==5){
					this.wei_c = e.value[0].text
				}
			},
			async getInfo() { //公式详情
				let _this = this
				let res = await this.http.request('/api/shop/Fordeail', 'POST', {
					shop_id: this.shop_id, //店鋪id
					id: this.id, //公式id
				})
				if (res.code == 1) {
					this.name = res.data.name
					this.code = res.data.code
					this.type = res.data.type
					let index = this.columns[0].findIndex(item => {
						return this.type == item.type
					})
					this.typeName = this.columns[0][index].name
					this.wei_a = res.data.wei_a
					this.wei_b = res.data.wei_b
					this.wei_c = res.data.wei_c
					this.hei_a = res.data.hei_a
					this.hei_b = res.data.hei_b
					this.hei_c = res.data.hei_c
					this.numval = res.data.numval
					this.num = res.data.num
					this.size = res.data.size
					this.pageShow = true
				} else if (res.code == 0) {
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			change(e) {
				console.log(e);
			},
			confirm(e) {
				console.log(e);
				this.typeName = e.value[0].name
				this.type = e.value[0].type
				this.show = false
			},
			async submit() { //確認
				if (!this.name) {
					this.http.toast("請輸入名稱！")
					return false
				}
				if (!this.code) {
					this.http.toast("請輸入代號！")
					return false
				}
				// if (!this.typeName) {
				// 	this.http.toast("請選擇类型！")
				// 	return false
				// }
				let weiFlag = false,
					heiFlag = false,
					pubFlag = false;
				let data = {
						id: this.id, //計算方式id
						shop_id: this.shop_id, //店鋪id
						name: this.name, //名称
						code: this.code, //代号
						wei_a: this.wei_a, //宽(+-*/)
						wei_b: this.wei_b, //宽值
						wei_c: this.wei_c, //宽(+-*/<>)
						hei_a: this.hei_a, //高(+-*/)
						hei_b: this.hei_b, //高值
						hei_c: this.hei_c, //高(+-*/)
						numval: this.numval, //数值
						type: this.type, //类型:0=宽高,1=宽,2=高,3=宽高最大,4=宽高最小
						typeName: this.typeName, //类型名称
						num: this.num, //小数
						size: this.size, //單位
					},
					url = "",
					text = "";
				// type==1
				if (this.type == 1) {
					if (!this.wei_a || !this.wei_b || !this.wei_c) {
						weiFlag = true
					}
				}
				if (weiFlag) {
					this.http.toast("請將寬一行的資訊補充完整！")
					return false
				}
				// type==2
				if (this.type == 2) {
					if (!this.hei_a || !this.hei_b || !this.hei_c) {
						heiFlag = true
					}
				}
				if (heiFlag) {
					this.http.toast("請將高一行的資訊補充完整！")
					return false
				}
				// type!=1 && type!= 2
				if (this.type != 1 && this.type != 2) {
					if (!this.wei_a || !this.wei_b || !this.wei_c || !this.hei_a || !this.hei_b || !this.hei_c) {
						pubFlag = true
					}
				}
				if (pubFlag && this.type!=5) {
					this.http.toast("請將寬一行或者高一行的資訊補充完整！")
					return false
				}

				// if (!this.numval) {
				// 	this.http.toast("請输入数值！")
				// 	return false
				// }
				if (!this.num) {
					this.http.toast("請輸入小數！")
					return false
				}
				if (!this.size) {
					this.http.toast("請輸入寛高單位！")
					return false
				}
				if (this.id) {
					url = "/api/shop/editFor"
					text = "修改成功！"
				} else {
					delete data.id
					url = "/api/shop/addFor"
					text = "添加成功！"
				}
				if(this.issubmit) return
				this.issubmit = true
				let res = await this.http.request(url, 'POST', data)
				if (res.code == 1) {
					this.http.toast(text)
					setTimeout(() => {
						uni.navigateBack(1)
					}, 500)
				} else {
					this.issubmit = false
					this.http.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.textcenter{
		text-align: center;
	}
	.titleBox{
		background-color: #ffb800;
		padding: 5rpx;
		text-align: center;
	}
	.line{
		border-top: 5rpx dashed #000000;
		margin-top: 30rpx;
	}
	.iteminputjs {
		width: 150rpx;
		max-width: 150rpx;
		min-width: 150rpx;
		border-radius: 10rpx;
		border: 1rpx solid rgba(0, 0, 0, .1);
		padding: 20rpx 30rpx;
	}

	::v-deep.uni-select {
		width: 160rpx;
		height: 80rpx;
		max-width: 160rpx;
		min-width: 160rpx;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
	}

	::v-deep.uni-select__input-text,
	.uni-select__input-placeholder {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		text-align: center;
	}
	
</style>